<template>
  <div class="home">
    <p>
      用户名：<input type="text" v-model="word" v-if="!show" /><span
        v-if="show"
        >{{ word }}</span
      >
      <span class="text">{{ text }}</span>
    </p>

    <div>
      <button v-show="!flag" @click="login">登录</button>
      <button v-show="flag" @click="tui">退出</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      word: "",
      text: "",
      flag: false,
      show: false,
    };
  },
  methods: {
    login() {
      if (this.word.length < 6 || this.word.length > 16) {
        this.text = "长度为6到16位";
        return false;
      }
      if(this.word != "王杨真的好帅!"){
        this.text = '密码错误'
        return false
      }
      if (this.word == "王杨真的好帅!") {
        this.flag = !this.flag;
        this.show = !this.show;
        this.$router.push('/about')
      }
    },
    tui() {
      this.flag = !this.flag;
      this.show = !this.show;
      this.word=''
      this.text = ''
    },
  },
};
</script>

<style>
.text {
  color: red;
}
</style>


